import { IMTableType } from "@/types/table";
import { labelStatusMap, labelTypeMap } from "./dict";
import { DrawerFormStateType } from "./type";
export const tableActiveKey = ref<any>(0);
export const labelGOptions = ref([]);
export const defaultLabelGOptions = ref([]);
export const defaultSearchList = reactive([
  [
    {
      label: computed(() => `${$t("table37")}ID`),
      type: "input",
      model: "tag_id",
      allowClear: true,
      searchClass: "search-item-width-150",
      placeholder: getProxyT("placeholder131"),
    },
    {
      label: getProxyT("table38"),
      type: "input",
      model: "tag_name",
      allowClear: true,
      searchClass: "search-item-width-150",
      placeholder: getProxyT("placeholder116"),
    },
    {
      label: getProxyT("table75"),
      type: "select",
      model: "attr_id",
      searchClass: "search-item-width-150",
      placeholder: getProxyT("placeholder132"),
      allowClear: true,
      options: labelGOptions,
      showSearch: true,
      showArrow: true,
      filterOption: filterOption,
      on: {
        keyup: ({ target }) => only_limit_charts(target),
      },
    },
    {
      label: getProxyT("table39"),
      type: "select",
      model: "type",
      searchClass: "search-item-width-150",
      placeholder: getProxyT("placeholder133"),
      allowClear: true,
      options: labelTypeMap,
    },
    {
      label: getProxyT("table123"),
      type: "select",
      model: "status",
      searchClass: "search-item-width-150",
      placeholder: getProxyT("placeholder134"),
      allowClear: true,
      options: labelStatusMap,
    },
    {
      label: getProxyT("table44"),
      type: "rangePicker",
      model: "start_end",
      placeholder: computed(() => [$t("base.startTime"), $t("base.endTime")]),
    },
  ],
  [
    {
      label: computed(() => `${$t("table45")}ID`),
      type: "input",
      model: "attr_id",
      placeholder: getProxyT("placeholder135"),
      allowClear: true,
    },
    {
      label: getProxyT("table46"),
      type: "input",
      model: "attr_name",
      placeholder: getProxyT("placeholder119"),
      allowClear: true,
      maxlength: 10,
    },
    {
      label: getProxyT("table47"),
      type: "select",
      model: "type",
      searchClass: "search-item-width-200",
      placeholder: getProxyT("placeholder121"),
      allowClear: true,
      options: labelTypeMap,
    },
    {
      label: getProxyT("table44"),
      type: "rangePicker",
      model: "start_end",
      placeholder: computed(() => [$t("base.startTime"), $t("base.endTime")]),
    },
  ],
]);
export const searchList = ref<any>(defaultSearchList[tableActiveKey.value]);
export const tabPower = reactive([true, true]);
export const operateType = ref<any>("");
export const defaultDataSource = toRefs(reactive<any[]>([[], [], []]));
export const drawerFormState = reactive<any>({});
export const defaultFormState = reactive<DrawerFormStateType>([
  {
    tag_id: undefined,
    type: 1,
    tag_name: undefined,
    attr_id: undefined,
    explain: undefined,
    status: 0,
  },
  {
    attr_id: undefined,
    attr_name: undefined,
    remark: undefined,
    tagIds: [],
    type: 1,
  },
]);
export const resetFormState = (formState) => {
  const currentFormState = defaultFormState[tableActiveKey.value];
  initObjAttr(formState, currentFormState);
};
resetFormState(drawerFormState);
export const set_formState = (
  type: string,
  formState: any = {},
  data: any = {}
) => {
  resetFormState(formState);
  const { info = {}, userTagAttr = [] } = data;
  if (type === "update") {
    initObjAttr(formState, info, "target");
    formState.attr_id = +info.attr_id != 0 ? info.attr_id : undefined;
  }
  labelGOptions.value = userTagAttr.map(({ attr_id, attr_name }: any) => ({
    label: attr_name,
    value: attr_id,
  }));
  defaultLabelGOptions.value = deepClone(labelGOptions.value);
};
export const defaultDrawerColumns = reactive([
  [
    {
      title: getProxyT("base.index"),
      dataIndex: "index",
      key: "index",
    },
    {
      title: getProxyT("table38"),
      dataIndex: "tag_name",
      key: "tag_name",
    },
    {
      title: getProxyT("table49"),
      dataIndex: "relate_time",
      key: "relate_time",
    },
    {
      title: getProxyT("table31"),
      dataIndex: "status",
      key: "status",
    },
    { title: getProxyT("base.action"), key: "action" },
  ],
]);

export const defaultColumns = reactive([
  [
    {
      title: getProxyT("base.index"),
      dataIndex: "index",
      key: "index",
    },
    {
      title: computed(() => `${$t("table37")}ID`),
      dataIndex: "tag_id",
      key: "tag_id",
    },
    {
      title: getProxyT("table38"),
      dataIndex: "tag_name",
      key: "tag_name",
    },
    {
      title: getProxyT("table39"),
      dataIndex: "type",
      key: "type",
    },
    {
      title: getProxyT("table40"),
      dataIndex: "attr_name",
      key: "attr_name",
    },
    {
      title: getProxyT("table41"),
      dataIndex: "explain",
      key: "explain",
    },
    {
      title: getProxyT("table42"),
      dataIndex: "personNum",
      key: "personNum",
    },
    {
      title: getProxyT("table31"),
      dataIndex: "status",
      key: "status",
    },
    {
      title: getProxyT("table43"),
      dataIndex: "created_at",
      key: "created_at",
      customRender: ({ text }: any) => getTimeByZone(text),
    },
    {
      title: getProxyT("table44"),
      dataIndex: "updated_at",
      key: "updated_at",
      customRender: ({ text }: any) => getTimeByZone(text),
    },
    { title: getProxyT("base.action"), key: "action" },
  ],
  [
    {
      title: getProxyT("base.index"),
      dataIndex: "index",
      key: "index",
    },
    {
      title: computed(() => `${$t("table45")}ID`),
      dataIndex: "attr_id",
      key: "attr_id",
    },
    {
      title: getProxyT("table46"),
      dataIndex: "attr_name",
      key: "attr_name",
    },
    {
      title: getProxyT("table47"),
      dataIndex: "type",
      key: "type",
    },
    {
      title: getProxyT("table41"),
      dataIndex: "remark",
      key: "remark",
    },
    {
      title: getProxyT("table48"),
      dataIndex: "tagNum",
      key: "tagNum",
    },
    {
      title: getProxyT("table43"),
      dataIndex: "created_at",
      key: "created_at",
    },
    {
      title: getProxyT("table44"),
      dataIndex: "updated_at",
      key: "updated_at",
    },
    { title: getProxyT("base.action"), key: "action" },
  ],
]);
export let columns = reactive<IMTableType[]>([
  ...defaultColumns[tableActiveKey.value],
]);
export const totalTagCount = ref(0);
export const labelOptions = ref<any>([]);
export const tmpLabelOptions = ref<any>([]);
export const visible = ref(false);
export const modalFormState = reactive<any>({
  attr_name: undefined,
  tag_id: [],
});
const disabledArray = reactive([
  computed(() => {
    return (
      isEmptyType(drawerFormState.tag_name) ||
      isEmptyType(drawerFormState.status)
    );
  }),
  computed(() => {
    return isEmptyType(drawerFormState.attr_name);
  }),
]);
export const drawer_disable_ok_button = computed(() => {
  return disabledArray[tableActiveKey.value].value;
});
export const modaldDisabled = computed(() => {
  return isEmptyType(modalFormState.tag_id);
});
export const queryParams = reactive<any>({});
export const drawerInputValidators = reactive(createArray(false, 1));
watch([() => tabPower[0], () => tabPower[1]], (newArrayState) => {
  if (newArrayState.some((item) => item === true))
    initObjAttr(columns, defaultColumns[tableActiveKey.value]);
  if (newArrayState.every((item) => item === false)) initObjAttr(columns, []);
});
